


import React, { FC, useEffect, useState } from 'react'
import { AformConfig, tableColumns, tableData } from "./config/index"
import AForm from "../../compent/AForm";
import ATable from "../../compent/ABtate";
import comment from "../../untils/api"
import style from "./index.module.scss"
import { message } from 'antd';
import { Button, Input, Modal } from 'antd';



export default function Comment() {
    const [pageSizes, setPageSize] = useState(10)
    const [page, setPage] = useState(1)
    const [total, settotal] = useState(0)
    const [data, setData] = useState([])
    const [fromobj, setFeomObj] = useState<object>({})
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [value, setValue] = useState("")
    const [commentObj, setCommentObj] = useState<any>({})
    const { TextArea } = Input;

    useEffect(() => {
        getList(page)
    }, [])
    const getList = (page: number, pageSize: number = pageSizes, Fromobj: object = fromobj) => {
        const params = {
            page,
            pageSize: pageSize,
            ...Fromobj
        }
        console.log(params)
        comment.getComment(params).then(res => {
            console.log(res.data)
            console.log(res.data.data[1])
            //列表
            setData(res.data.data[0])
            //总数据
            settotal(res.data.data[1])
        })
    }

    const onPageSize = (pageNumber: number, pageSize: number) => {
        console.log(pageNumber, pageSize, "从子组件获取")
        setPage(pageNumber)
        setPageSize(pageSize)
        getList(pageNumber, pageSize)
    }
    //提交表单信息
    const submit = (data: any) => {
        console.log(data)
        setFeomObj(data)
        //调用接口
        getList(page, pageSizes, data)

    }
    //重置
    const onResetFields = () => {
        // setFeomObj({}),
        getList(page, pageSizes, {})
    }
    //评论不通过
    const PassComment = (id: number, pass: boolean) => {
        console.log(id, pass)
        comment.passComment(id, { pass }).then(res => {
            const msg = `评论${pass ? "通过" : "未通过"}`
            message.success(msg)
            getList(page)
        })

    }
    //回复评论
    const Recomment = (record: object) => {
        console.log(record)
        setCommentObj(record)
        showModal()

    }
    //删除评论
    const DeleteComment = (id: number) => {
        comment.deleteComment(id).then(res => {
            if (res.data.statusCode === 200) {
                message.success("删除成功")
            }
        })
        getList(page)
    }
    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
        console.log(value, "--------value")
        console.log(commentObj, "----------obj")
        const data = {
            content: value,
            createByAdmin: true,
            email: commentObj.email,
            hostId: commentObj.hostId,
            name: commentObj.name,
            parentCommentId:commentObj.parentCommentId,
            replyUserEmail:commentObj.replyUserEmail,
            replyUserName: commentObj.replyUserName,
            url: commentObj.url,

        }
        
        comment.Recomment(data).then(res=>{
            console.log(res.data)
            if(res.data.statusCode){
                message.success("回复成功")
                getList(page)
            }
        })
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    return (
        <div>
            <AForm
                AformConfig={AformConfig}
                onsubmit={submit}
                onResetFields={onResetFields}
            ></AForm>
            {/* 表格 */}
            <ATable
                total={total}
                page={page}
                pageSize={pageSizes}
                onchange={onPageSize}
                columns={tableColumns(PassComment, Recomment, DeleteComment)}
                data={data}></ATable>
            <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <TextArea onChange={(e) => { setValue(e.target.value) }} rows={4} />
            </Modal>
        </div>
    )
}


